<template>
    <div>
        <Breadcrumb :style="{ margin: '20px 0' }">
            <BreadcrumbItem>发布操作</BreadcrumbItem>
            <BreadcrumbItem>Application Package Setting</BreadcrumbItem>
        </Breadcrumb>
        <ButtonGroup>
            <Button type="primary" @click="getPackageList">刷新</Button>
            <Button type="primary" @click="addPackage">添加App包名</Button>
        </ButtonGroup>
        <Table :columns="columns" :data="packageList"></Table>
        <Modal v-model="modalShow" title="添加手机" @on-ok="saveData">
            <div class="field">
                <div class="label">App的名称</div>
                <Input
                    v-model="packageInfo.name"
                    class="mb-10"
                    placeholder="名称"
                />
            </div>
            <div class="field">
                <div class="label">要启动的App包名</div>
                <Input
                    v-model="packageInfo.active"
                    class="mb-10"
                    placeholder="名称"
                />
            </div>
        </Modal>
    </div>
</template>

<script>
import model from '../util/model'

export default {
  name: 'ApplicationList',
  data: function () {
    return {
      packageInfo: {
        name: '',
        active: ''
      },
      modalShow: false,
      columns: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '启动包名',
          key: 'active'
        },
        {
          title: '操作',
          render: (h, p) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-create',
                  size: '14',
                  class: 'btn-icon'
                },
                on: {
                  click: () => {
                    this.editPackage(p)
                  }
                }
              }),
              h('Icon', {
                props: {
                  type: 'md-trash',
                  size: '14'
                },
                on: {
                  click: () => {
                    this.removePackage(p)
                  }
                }
              })
            ])
          }
        }
      ],
      packageList: []
    }
  },
  created: function () {
    this.getPackageList()
  },
  methods: {
    getPackageList: function () {
      let that = this
      // eslint-disable-next-line handle-callback-err
      model.package.find({}, (err, doc) => {
        that.packageList = doc
      })
    },
    addPackage: function () {
      this.modalShow = true
    },
    editPackage: function (p) {
      this.package = p.row
      this.modalShow = true
    },
    removePackage: function (p) {
      let that = this
      console.log(p.row)
      model.package.remove(
        {
          _id: p.row._id
        },
        // eslint-disable-next-line handle-callback-err
        (err, rows) => {
          if (rows) {
            that.$Message.info('删除成功')
            that.getPackageList()
          }
        }
      )
    },
    saveData: function () {
      let that = this
      model.package.insert(this.package, (err, row) => {
        if (row) {
          that.$Message.info('添加成功')
          that.getPackageList()
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
